<template>
    <div v-wechat-title="VueTitle"> 
		<div class="index-banner">
			<div class="user-log-wrap">
				<div class="user-log-box clearfix">
					<!-- 未登录 -->
					<div class="unlog">
						<div class="log-title"><span>会员登录</span></div>
						<div class="log-form">
							<Form ref="loginInfo" :model="loginInfo" :rules="loginrule" :label-width="40" label-position="left">
								<FormItem label="账号" prop="loginUserName">
									<Input placeholder="请输入账号" v-model="loginInfo.loginUserName" @keyup.enter.native="loginNow('loginInfo')"></Input>
								</FormItem>
								<FormItem label="密码" prop="loginPsd">
									<Input type="password" placeholder="请输入密码" v-model="loginInfo.loginPsd" @keyup.enter.native="loginNow('loginInfo')"></Input>
								</FormItem>
							</Form>
						</div>

						<div class="log-btn">
							<Button type="error" autofocus size="large" :loading="btnLoading" long @click="loginNow('loginInfo')">
							<span v-if="!btnLoading">立即登录</span>
							<span v-else>登录中...</span>
							</Button>
						</div>
						
						<div class="autolog-box clearfix">
							<label for="" class="fl"><Checkbox v-model="rememberPsd">记住密码</Checkbox></label>
							<p class="fr"><a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">忘记密码？</a> | <router-link to="/reg">注册</router-link></p>
							<!-- <a href="###" @click="jumpToService">忘记密码</a> <span>|</span> 后续添加在注册前面 -->
						</div>

						<div class="third-party" style="display:none">
							<div class="t-title">第三方账号登录</div>
							<div class="t-con">
								<a href="javascript:void(0);"  class="icon-qq"></a>
								<a href="javascript:void(0);"  class="icon-wx"></a>
								<a href="javascript:void(0);"  class="icon-xl"></a>
							</div>
						</div>
					</div>
					<!-- 未登录 -->
				</div>
			</div>
      	</div>
    </div>
</template>
<script>
import { fetchJson } from "@/common/js/request";
import _ from "lodash";
import chooseRoom from "./chooseRoom";
import loginStore from "@/store/loginStore";
import { mapGetters, mapActions } from "vuex";
import ICountUp from 'vue-countup-v2';

export default {
	components: {
		chooseRoom,
		ICountUp
	},
	data() {
		//登录验证
		const validateLoginUserName = (rule, value, callback) => {
			if (!value) {
				callback(new Error("账号不能为空"));
			} else {
				callback();
			}
		};
		const validateLoginPsd = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("密码不能为空"));
			} else {
				callback();
			}
		};
		return {
			VueTitle: '购彩大厅',
			indexData: {}, //首页数据
			showCRoom: false, //房间选择窗
			cRoomData: {}, //房间选择窗数据
			pwd: '', //房间密码
			carouselIndex: 0,

			//荣誉等级
			LevelSort: '', //当前等级
			LevelName: '', //当前等级名称
			user_score: 0, //当前积分
			next_score: 0, //下一级积分
			differ_score: 0, //距离升级差的积分
			next_status: '',  //是否到最高级别

			recentlyLoading: true, //最近在玩loading
			recentlyData: [], //最近在玩
			lotteryLogo: '', //根据彩种类型匹配房间LOGO
			//登录信息
			rememberPsd: false, //记住密码
			loginInfo: {
				loginUserName: localStorage.getItem('userName'),
				loginPsd: localStorage.getItem('password'),
			},
			loginrule: {
				loginUserName: [{validator: validateLoginUserName, trigger: 'blur'}],
				loginPsd: [{validator: validateLoginPsd, trigger: 'blur'}]
			},
			checkedTrue: true, //记住账号

			redpacketInfo: {}, //红包状态信息
			redpacketRules: {}, //红包规则
			gainRedpacket: {}, //拆开红包信息
			redRuleModal: false, //规则弹框
			rednotOpenFlag: false, //红包未拆开
			redOpenedFlag: false, //红包拆开
			redFlag: false, //红包拆开加载

			btnLoading: false,

			//统计数据
			startVal: 0,
			fitTotal: 0,
			earnRate: 0,
			regTotal: 0,
			duration: 2.5,

			isTourist: false,
    	};
  	},
	beforeCreate: function() {
		this.$Spin.show();
	},
	created() {
		this.browserRedirect();
		this.$Message.config({
			top: 200,
		});
		if (this.accountData.is_tourist && this.accountData.is_tourist === 1) { //游客判断
			this.isTourist = true;
		}
		if (this.getHeaderFooter && this.getHeaderFooter.earn_rate) {
			this.fitTotal = Number(this.getHeaderFooter.fit_total);
			this.earnRate = Number(this.getHeaderFooter.earn_rate);
			this.regTotal = Number(this.getHeaderFooter.reg_total);
		}
		this.setCRoom(this.$route.params.state,this.$route.query.lottery_type);
		this.initRoom();
		var vm = this;
		if (vm.userInfo.username) {
			setTimeout(function() {
				vm.nextScore();
				vm.recentlyPlay();
				vm.redSwitch();
			}, 20)
		}
  	},
	mounted() {
		
	},
	computed: {
		...mapGetters(["userInfo", "accountData", "userData", "isLogin", "getHeaderFooter", 'service', 'platformConfig'])
	},
	methods: {
		...mapActions([
			"SET_ISLOGIN",
			'SET_USER_INFO_DATA',
			'SET_ACCOUNT_DATA',
			'SET_USER_DATA',
			'REG_ISTER_SHOW'
		]),
		browserRedirect() { //区分PC、H5
            let sUserAgent = navigator.userAgent.toLowerCase();
            let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            let bIsMidp = sUserAgent.match(/midp/i) == "midp";
            let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            let bIsAndroid = sUserAgent.match(/android/i) == "android";
            let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
				this._getLinkUrl();
				console.log('isMobile')
            } else {
				console.log('isPc')
            }
        },
		_getLinkUrl() {
			this.linkUrl = this.imgRequest + '/pcmobile/index.html'
			window.open(this.linkUrl, '_self')
		},
		emptyAvatarUrl() { //清空头像路径
			this.userInfo.avatar = ''
		},
		emptyuserPicUrl(index) { //清空红包列表头像路径
			this.gainRedpacket.all_gain_list[index].user_pic = ''
		},
    	agencyShare() { //代理分享
			if (!localStorage.getItem("token")) { //未登录状态
				this.$Message.info('您还未登录，请先登录')
				return
			}
			this.$router.push({
				path: "/personalCenter/agencyShare",
				query: {query:Date.parse(new Date())}
			});
    	},
		changePassword() { //修改密码
			if (!localStorage.getItem("token")) { //未登录状态
				this.$Message.info('您还未登录，请先登录')
				return
			}
			if (!JSON.parse(localStorage.getItem("isUser"))) {
				this.$Message.info('游客暂无权限，请先注册会员')
				return
			}
			this.$router.push({
				path: "/personalCenter/securitySetting",
				query: {query:Date.parse(new Date())}
			});
		},
		bindBank() { //绑定银行卡
			if (!localStorage.getItem("token")) { //未登录状态
				this.$Message.info('您还未登录，请先登录')
				return
			}
			if (!JSON.parse(localStorage.getItem("isUser"))) {
				this.$Message.info('游客暂无权限，请先注册会员')
				return
			}
			this.$router.push({
				path: "/personalCenter/cardManager",
				query: {query:Date.parse(new Date())}
			});
		},
		initRoom() {
			let vm = this
			fetchJson(vm, vm.urlRequest + "?m=win&c=lobby&a=index", { code: "1234" }).then(result => {
				if (_.isEmpty(result)) {
					return;
				}
				vm.$Spin.hide();
				vm.indexData = result.data
			})
		},
		setCRoom(state, gameId, roomLogo) {
			if (state == undefined) {
				return;
			} else if (state == false) {
				this.showCRoom = state;
				this.cRoomData={}        
			}
			if (state) {
				if (_.isEmpty(localStorage.getItem('token'))) {
					this.$Modal.warning({
						content: '您还未登录，请先登录',
						onOk: () => {
							this.$router.push({path:'/login'});
						}
					});
				}
				fetchJson(this, "?m=win&c=lobby&a=getLotteryRoomList", {type: gameId}).then(result => {
					if (_.isEmpty(result)) {
						return;
					}
					if(result.data.p_room[0].lottery_type==12){
						this.$Message.info('暂未开放，敬请期待')
						return
					}
					this.showCRoom = state;
					this.cRoomData = result.data;
					console.log(this.cRoomData,'cRoomData')
				});
			}
		},
		goRoom(item) { //进入房间
			var lottery_type = item.lottery_type
			var id = item.id
			var pwd = item.passwd
			var maxYb = parseInt(item.max_yb)
			var lowYb = parseInt(item.low_yb)
			var tips = item.lack_tips
			if (!localStorage.getItem("token")) {
				this.$Modal.warning({
					content: '您还未登录，请先登录',
					scrollable: true,
					onOk: () => {
						var vm = this;
						setTimeout(() => {
						vm.$router.push({path:'/login'});
						}, 500);
						return
					}
				});
				return false;
			}
			var userMoney = parseInt(this.accountData.money);
			if (pwd==='') {
				if (maxYb<userMoney || userMoney<lowYb) {
				if (_.isEmpty(tips)) {
					this.$Message.warning('进入失败，请稍后重试');
				} else {
					this.$Message.warning(tips);
				}      
					return false;
				}
				const {href} = this.$router.resolve({
					path:'/room/' + id,
					params: {id: id},
					query: {id: id, lottery_type: lottery_type}
				})
				var tempwindow = window.open()
        		tempwindow.location = href
			} else {
				var that = this;
				var tempwindow=window.open('about:blank')
				fetchJson(this, '?m=api&c=lobby&a=privateRoom', {lottery_type:lottery_type, secret_pwd:this.pwd}).then(result => {
					if (result.status === 0) {
						if (result.data.passwd === that.pwd) { //密码正确
							localStorage.setItem('MdStory','私密房间');
							const {href} = this.$router.resolve({
								path:'/room/'+id,
								params: {id:result.data.id},
								query: {id: result.data.id,lottery_type: lottery_type}
							})
        					tempwindow.location = href
						} else {
							this.$Message.warning('房间密码错误');              
						}
					} else {
						this.$Message.warning('房间密码错误');
					}
				});
			}
		},
		recentlyRoom(gameId) { //最近在玩默认进入最低限制房间
			fetchJson(this, "?m=win&c=lobby&a=getLotteryRoomList", {type: gameId}).then(result => {
				this.goRoom(result.data.p_room[0])
			});
		},
		isRecharge() { //点击充值判断是否游客
			if (!JSON.parse(localStorage.getItem("isUser"))) {
				this.$Modal.warning({
					content: '游客暂无权限，请先注册会员',
					scrollable: true,
					onOk: () => {
						var vm = this;
						setTimeout(() => {
							vm.$router.push({path:'/reg'});
						}, 1000);
					}
				});
			} else {
				this.$router.push({path:'/topUpCenter/recharge'});
			}
		},
		isWithdraw() { //点击提现判断是否游客
			if (!JSON.parse(localStorage.getItem("isUser"))) {
				this.$Modal.warning({
					content: '游客暂无权限，请先注册会员',
					scrollable: true,
					onOk: () => {
						var vm = this;
						setTimeout(() => {
							vm.$router.push({path:'/reg'});
						}, 1000);
					}
				});
			} else {
				this.$router.push({path:'/topUpCenter/withdraw'});
			}
		},
		more(id) {
			if (localStorage.getItem("token")) {
				this.$router.push({
					path: '/personalCenter/announcement',
          			query: {'query': Date.parse(new Date())}
				});
				this.$store.commit('noticeId', id)
			} else {
				this.$Modal.warning({
					content: '您还未登录，请先登录',
					scrollable: true,
					onOk: () => {
						var vm = this;
						setTimeout(() => {
							vm.$router.push({path:'/login'});
						}, 500);
						return
					}
				});
			}
		},
		moreJump() {
			if (localStorage.getItem("token")) {
				this.$router.push({
					path: '/personalCenter/announcement',
          			query: {'query': Date.parse(new Date())}
				});
			} else {
				this.$Modal.warning({
					content: '您还未登录，请先登录',
					scrollable: true,
					onOk: () => {
						var vm = this;
						setTimeout(() => {
							vm.$router.push({path:'/login'});
						}, 500);
						return
					}
				});
			}
		},
		nextScore() { //获取积分
			let vm = this;
			vm.LevelSort = Number(vm.userInfo.honor.sort); //当前等级
			vm.LevelName = vm.userInfo.honor.name; //当前等级名称
			let score = Number(vm.userInfo.honor.score); //上一级的标准
			vm.next_score =Number(vm.userInfo.honor.next_score) ; //下一级的标准
			// this.user_score = 400; //当前积分测试数据
			vm.user_score = Number(vm.userInfo.honor.user_score); //当前积分
			vm.differ_score = vm.next_score - vm.user_score; //距离升级差的积分
			vm.next_status = vm.userInfo.honor.next_status; //是否到最高级别
			// this.widthScore =50; //当前百分比测试数据
			if (vm.next_status == 1) {
				vm.widthScore = 100;
			} else {
				vm.widthScore = Math.ceil((vm.user_score - score) / (vm.next_score - score) *100);
			}
			vm.$refs.refWidthScore.style.width = vm.widthScore +'%';
		},
		recentlyPlay() { //最近在玩
			var params = {
				uid: this.userInfo.id
			};
			this.$http.post(this.urlRequest + "?m=api&c=workerman&a=recently_lottery_beting", params).then(res => {
				if (res.status == 200) {
					this.recentlyLoading = false;
					this.recentlyData = res.data;
				} else {
					this.$Message.success(res.data.ret_msg);
				}
			});
		},
		loginNow(loginInfo) { //立即登录
			this.$refs[loginInfo].validate(valid => {
				if (valid) {
					var params = {
						username: this.loginInfo.loginUserName,
						password: this.loginInfo.loginPsd,
						flag: "4",
						code: "1234",
						type: "1",
						openid: "",
						nickname: "",
						avatar: ""
					};
					this.btnLoading = true;
					this.$http.post(this.urlRequest + "?m=api&c=user&a=login", params).then(res => {
						this.btnLoading = false;
						if (res.data.status == 0) {
							localStorage.setItem("token", res.data.token);
							localStorage.setItem("isLogin", true);
							localStorage.setItem("isUser", true);

							let newUserData = res.data;
							this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
								this.SET_USER_INFO_DATA({
									Obj : res.data.data
								})
								newUserData.honor = res.data.data.honor
								localStorage.setItem("userData", JSON.stringify(newUserData));
							})
							
							this.SET_ACCOUNT_DATA({
								Obj: {}
							});
							loginStore.commit("changeIsLogin", true);
							this.SET_ISLOGIN({
								boolean: true
							});
							this.$Message.success("登录成功!");
							this.$emit("tipsFunFlag", 1); //平台公告弹窗
							if (this.rememberPsd) {
								localStorage.setItem("userName",this.loginInfo.loginUserName),
								localStorage.setItem("password", this.loginInfo.loginPsd);
							} else {
								localStorage.setItem("password","");
								this.loginInfo.loginPsd = ""
							}
						} else {
							this.$Message.error(res.data.ret_msg);
						}
					}).catch(error => {
						this.btnLoading = false;
						this.$Message.error("数据请求超时");
					});
				} else {
					this.btnLoading = false;
					this.$Message.error("登录失败!");
				}
			});
		},
		redSwitch() { //红包开关
			if (localStorage.getItem("token")) {
				var params = {
					token: localStorage.getItem("token")
				};
				this.$http.post(this.urlRequest + "?m=api&c=redpacket&a=checkRedpacketByUser", params).then(res => {
					if (res.data.status == 0) {
						this.redpacketInfo = res.data.redpacket_info
					} else {
						this.$Message.success(res.data.ret_msg);
					}
				});
			}
		},
		RedPop() { //红包弹框
			if (!JSON.parse(localStorage.getItem('isUser'))) {
				this.$Message.warning('游客无法参与活动，请先注册会员再来哦！')
				return
			}
			if (this.redpacketInfo.can_user_join == 0) { //参与资格 0没资格 1有资格
				var params = {
					token: localStorage.getItem("token"),
					redpacket_id: this.redpacketInfo.redpacket_id
				};
				this.$http.post(this.urlRequest + "?m=api&c=redpacket&a=redpacketRules", params).then(res => {
					if (res.data.status ==0) { //红包规则
						this.redRuleModal = true;
						this.redpacketRules = res.data;
					} else {
						this.$Message.success(res.data.ret_msg);
					}
				});
				return
			}
			if (this.redpacketInfo.has_redpacket == 1 && this.redpacketInfo.is_user_already_join == 0) { //has_redpacket是否有红包 0没有 1有 is_user_already_join是否参与 0没参与 1已参与
				this.redOpenedFlag = false;
				this.rednotOpenFlag = true;
			} else {
				this.redOpened();
			}
		},
		redOpened() { //拆红包
			this.redFlag = true;
			var params = {
				token: localStorage.getItem("token"),
				redpacket_id: this.redpacketInfo.redpacket_id
			};
			this.$http.post(this.urlRequest + "?m=api&c=redpacket&a=gainRedpacket", params).then(res => {
				if (res.data.status == 0) { //开启红包
					this.redFlag = false;
					this.rednotOpenFlag = false;
					this.redOpenedFlag = true;
					this.gainRedpacket = res.data;
				} else {
					this.$Message.success(res.data.ret_msg);
				}
			});
		},
		redRecord() { //查看历史记录跳转个人中心
			this.redOpenedFlag = false;
			this.$router.push({
				path:'/personalCenter/dealDetail',
				query:{'query': Date.parse(new Date()), 'tranType': 6}
			});
		}
	},
  	watch: {
		userInfo(obj) {
			var vm = this;
			if (obj.username) {
				setTimeout(function() {
					vm.nextScore();
					vm.recentlyPlay();
					vm.redSwitch();
				}, 20)
			}
		},
		accountData(obj) {
			if (obj.is_tourist && obj.is_tourist === 1) { //游客判断
				this.isTourist = true;
			}
		},
		getHeaderFooter(obj) {
			if (obj.earn_rate) {
				this.fitTotal = Number(obj.fit_total);
				this.earnRate = Number(obj.earn_rate);
				this.regTotal = Number(obj.reg_total);
			}
		}
	},
	deactivated() {},
	beforeDestroy() {}
};
</script>

<style scoped>
/* --- 登录框 --- */
.user-log-wrap {
    z-index: 1;
    position: absolute;
    left: 50%;
    margin-left: -609px;
    width:314px;
    padding: 18px 9px 0;
}
.user-log-box {
    padding: 5px 25px 20px 25px;
    background: rgba(255,255,255,1);
    opacity:0.94;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    border-radius: 0px 0px 4px 4px;
}
.user-log-box .log-title {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    color: #48484C;
    line-height: 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid #E6E3DA;
}
.user-log-box .log-title span {
    position: relative;
}
.user-log-box .log-title span::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 3px solid #C8313C;
}
.user-log-box .log-form {
    padding-top: 20px;
}
.autolog-box {
    padding-top: 10px;
}
.autolog-box .fr,
.autolog-box a {
    color: #C82834;
}
.autolog-box a:hover {
    color: #E64254;
}
/* --- 已登录 --- */
.loged .user-info {
    min-height: 84px;
}
.loged .user-info dt,
.loged .user-info dt img {
    float: left;
    width: 84px;
    height: 84px;
    border-radius: 50%;
}
.loged .user-info dd {
    padding-left:100px;
    font-size: 12px;
    line-height: 20px;
}
.loged .user-info dd .name {
    position:relative;
    padding-right:40px;
    font-size: 18px;
    line-height: 25px;
    color: #222222;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.loged .user-info dd .name .name-r {
    position: absolute;
    right: 0;
    font-size: 12px;
    color: #999;
}
.loged .user-info dd .name .name-r:hover {
    color: #f3596a;
}
.loged .user-info dd .name,
.loged .user-info dd .money {
    margin-bottom: 6px;
}
.loged .user-info dd .money .c-red {
    font-size: 16px;
}
.loged .user-info dd .btn {
    float: left;
    width: 48%;
    margin-right: 2%;
    text-align: center;
    line-height: 24px;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
}
.loged .user-info dd .btn:last-child {
    margin-left: 2%;
    margin-right: 0;
}
.recent h3 {
    font-size: 14px;
}
.recent ul {
    position: relative;
}
.recent .load-wrap {
    height: 130px;
}
.recent ul li {
    position: relative;
    float: left;
    margin: 3px 0;
    width: 100%;
    line-height: 20px;
    padding-left: 10px;
    font-size: 12px;
    cursor: pointer;
}
.recent ul li:hover {
  	background: #EEE;
}
.recent ul li .arrow {
    position: absolute;
    left: 0;
    top: 0px;
    line-height: 20px;
}
.recent ul li .lottery-logo,
.recent ul li .lottery-logo img {
    float: left;
    width: 20px;
    height: 20px;
}
.recent ul li .name {
    float: left;
    margin: 0 5px;
    width: 70px;
}
.recent ul li .room {
    float: left;
    width: 70px;
}
.recent ul li .name,
.recent ul li .room {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.recent ul li:hover .arrow,
.recent ul li:hover .name,
.recent ul li:hover .room {
    color: #C8313C;
}
.recent ul li .status {
    float: right;
    position: relative;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    background: #F49E0C;
    border-radius: 2px;
}
.recent ul li .status::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -5px;
    margin-top: -5px;
    width: 0;
    height: 0;
    border-width: 5px 5px 5px 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: #F49E0C;
}
.recent ul li .status-red {
    background: #C8313C;
}
.recent ul li .status-red::before {
    border-right-color: #C8313C;
}

/* --- banner --- */
.index-banner {
    position: relative;
    height: 600px;
}
.ivu-carousel {
    text-align: center;
}
.ivu-carousel .demo-carousel {
    position: relative;
    height: 600px;
    overflow: hidden;
}
.demo-carousel img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -960px;
    width: 1920px;
    height: 600px;
}
.ivu-carousel:hover >>> .ivu-carousel-arrow-hover {
    display: none;
}
.ivu-carousel >>> .ivu-carousel-list {
    height: 600px;
}
.ivu-carousel >>> .ivu-carousel-dots {
    display: inline-block;
    width: auto;
    height: 24px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.5);
    border-radius: 18px;
    margin-top: 35px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
}
.ivu-carousel >>> .ivu-carousel-dots li {
    margin: 0 3px;
    padding: 0;
}
.ivu-carousel >>> .ivu-carousel-dots li button {
    opacity: 1;
    width: 12px;
    height: 12px;
    background:rgba(125,125,125,1);
    border-radius: 6px;
}
.ivu-carousel >>> .ivu-carousel-dots li.ivu-carousel-active > button {
    width: 29px;
    background:rgba(200,49,60,1);
}

/* --- 内容部分 --- */
.main-content {
    width: 100%;
    background: #fff;
}
.container-wrapper {
	margin-top: -240px;
	z-index: 1;
	position: relative;
	width: 100%;
	padding: 0 20px;
	background: #fff;
	background: -webkit-linear-gradient(90deg,#ffffff 95%,#e0e0de 99%);
	border-radius:5px;  
}
.row-area {
	display: flex;
	justify-content: space-between;
}
.row-area .left-column {
	flex: 0 0 285px;
	width: 285px;
	position: relative;
	overflow: hidden;
}
.row-area .right-column {
	flex: 0 0 860px;
	width: 860px;
}
.public-title {
	padding: 15px 0 15px 15px;
}
/* --- 平台公告 --- */
.platform-notice .more {
	float: right;
	margin-top: 4px;
	line-height: 24px;
	font-size: 14px;
	font-weight: 200;
	color: #2d8cf0;
	border: 1px solid #2d8cf0;
	border-radius: 5px;
	padding: 0 5px;
}
.hot-news {
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
    overflow: hidden;
}
.hot-news h4 {
	padding-bottom: 5px;
	line-height: 25px;
	font-size: 16px;
	color: #f3596a;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.hot-news img {
	float: left;
	width: 84px;
	height: 62px;
}
.hot-news .hot-news-info {
	margin-left: 100px;
	height: 62px;
}
.hot-news .hot-news-info p {
	height: 40px;
	line-height: 20px;
	color: #999;
	overflow: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/*! autoprefixer: off */  
	-webkit-box-orient: vertical;  
	/* autoprefixer: on */
}
.hot-news .hot-news-info .detail {
	display: inline-block;
	line-height: 22px;
	color: #2d8cf0;
}
.hot-news:hover {
  	cursor: pointer;
}
.hot-news:hover h4 {
  	color: #2d8cf0;
}
.hot-news:hover p {
  	color: #495060;
}
.notice-list {
	height: 120px;
	overflow: hidden;
}
.notice-list li {
	line-height: 30px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.notice-list li:hover {
	cursor: pointer;
	color: #2d8cf0;
}
.no-notice {
	text-align: center;
	height: 224px;
	line-height: 224px;
}
.no-notice img {
	vertical-align: middle;
	width: 120px;
}
/* --- 投注动态 --- */
.bet-dynamic-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.bet-dynamic {
	flex: 1;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 5px;
	overflow: hidden;
}
.bet-dynamic ul {
  	animation: loopSlide 15s linear infinite;
}
@keyframes loopSlide {
	0%   { transform: translateY(0%); }
	100% { transform: translateY(-50%); }
}
.bet-dynamic ul li {
	width: 100%;
	line-height: 30px;
	font-size: 14px;
	color: #222;
	border-bottom: 1px solid #eee;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.text-blue {
  	color: #2d8cf0;
}
.text-red {
  	color: red;
}
/* --- 彩种列表 --- */
.lottery-list {
	margin-top: -8px;
	position: relative;
	overflow: hidden;
	padding: 8px 5px 3px 5px;
}
.lottery-list ul {
  	margin-top: -20px;
}
.lottery-list li {
	float: left;
	margin-top: 20px;
	margin-right: 20px;
	position: relative;
	width: 270px;
	height: 114px;
	cursor: pointer;
	background-color: #ffffff;
	border: solid 1px #eeeeee;
	border-radius: 5px;
	box-shadow: 1px 1px 5px 0px rgb(187, 187, 187);
	overflow: hidden;
	transition: all 0.2s ease-in-out;
}
.lottery-list li:nth-child(3n) {
  	margin-right: 0
}
.lottery-list li .today-draw {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}
.lottery-list li .shadow {
	z-index: 2;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity .5s;
	background: rgba(0, 0, 0, 0.1);
}
.lottery-list li .period-info {
	z-index: 1;
	position: absolute;
	right: 0px;
	padding: 0 5px;
	color: #FFF;
	font-size: 16px;
	background: rgba(0, 0,0,0.1);
	border-radius:5px 0px 0px 5px; 
}
.lottery-list li .lottery-img {
	width: 270px;
	height: 114px;
}
.lottery-list li:hover {
	transform:translate(0, -8px);
	box-shadow: 0 1px 4px 1px #bbb;
}
.lottery-list li:hover .shadow {
  	opacity: 1
}
.hot-lottery .lottery-list li {
  	height: 224px;
}
.hot-lottery .lottery-list li .lottery-img {
	width: 270px;
	height: 224px;
}
.hot-lottery .go-game {
	z-index: 5;
	position: absolute;
	bottom: 4px;
	right: 4px;
	padding: 3px 10px;
	color: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
}
.hot-lottery li:hover .go-game {
	background: #f3596a;
	color: white;
}

/* --- 快捷通道 --- */
.fast-channel {
	border: 1px solid #eee;
	border-radius: 5px;
}
.fast-channel >>> .ivu-col a {
	display: block;
	text-align: center;
	padding: 8px 0;
}
.fast-channel >>> .ivu-col a:hover {
	background: rgba(0,0,0,.01)
}
.fast-channel >>> .ivu-col:nth-of-type(1) {
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.fast-channel >>> .ivu-col:nth-of-type(2) {
  	border-bottom: 1px solid #eee;
}
.fast-channel >>> .ivu-col:nth-of-type(3) {
 	border-right: 1px solid #eee;
}
.fast-channel >>> .ivu-col .icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center; 
}
.fast-channel >>> .ivu-col p {
	padding-top: 5px;
	line-height: 1;
}

.fast-channel >>> .ivu-col:nth-of-type(1) p {
  	color: #63D0CA;
}
.fast-channel >>> .ivu-col:nth-of-type(2) p {
  	color: #0095EA;
}
.fast-channel >>> .ivu-col:nth-of-type(3) p {
	color: #E8AF56;
}
.fast-channel >>> .ivu-col:nth-of-type(4) p {
  	color: #8EE856;
}
/* --- 平台数据 --- */
.platform-data {
	padding: 20px 0;
	border: 1px solid #eee;
	border-top-width: 6px;
	border-top-color: #F3596A;
}
.platform-data >>> .ivu-col {
  	text-align: center;
}
.platform-data >>> .ivu-col:nth-of-type(2) {
	border-left: 2px dotted rgba(153, 153, 153, .4);
	border-right: 2px dotted rgba(153, 153, 153, .4);
}
.platform-data .icon {
	display: inline-block;
	margin-right: 4px;
	vertical-align: top;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center; 
}
.platform-data >>> .ivu-col p {
	color: #48484C;
	font-size: 16px;
	line-height: 24px;
}
.platform-data >>> .ivu-col h4 {
	font-size: 32px;
	font-weight: 700;
	line-height: 48px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.platform-data .ingot h4 {
  	color: #E64254;
}
.platform-data .rate h4 {
  	color: #F48D12;
}
.platform-data .enrollment h4 {
  	color: #4A90E2;
}
/* --- 底部下载 --- */
.download-area {
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
    width: 100%;
    height: 152px;
    background-size: 100%;
}
.download-area .imgapp {
	position: absolute;
	left: 29px;
	top: 29px;
	width: 87px;
	height: 87px;
}

/*--- 红包模块 ---*/
.redPacket {
    z-index: 1;
    position: absolute;
    top: 60px;
    left: -95px;
    width: 109px;
    height: 287px;
    cursor: pointer;
}
.redPacket span {
    position: absolute;
    top: 12px;
    left: 44px;
    width: 46px;
    height: 207px;
    animation: twinkling 1.5s infinite ease-in-out;
}
/* .redPacket .text2 {
    z-index: 1;
    background: url('../../assets/images/red/text2.png') no-repeat;
    animation-name: twinkling2;
} */
@keyframes twinkling {
    0%   { transform:scale(1,1); }
    20%  { transform:scale(1.02,1.02); }
    30%  { transform:scale(1.03,1.03); }
    40%  { transform:scale(1.04,1.04); }
    50%  { transform:scale(1.05,1.05); }
    60%  { transform:scale(1.04,1.04); }
    70%  { transform:scale(1.03,1.03); }
    80%  { transform:scale(1.02,1.02); }
    100% { transform:scale(1,1); }
}
@keyframes twinkling2 {
    0%   { opacity:1; transform: scale(1); }
    100% { opacity:0; transform: scale(1.05); }
}
.red-modal >>> .ivu-modal-close .ivu-icon-ios-close-empty,
.red-modal >>> .ivu-modal-close .ivu-icon-ios-close-empty:hover {
    z-index: 1;
    color: #fff;
}
.red-modal >>> .ivu-modal-content {
    background: none;
    border-radius: 12px;
}
.red-modal >>> .ivu-modal-body {
    padding: 0;
}
.red-modal >>> .ivu-modal-footer {
    display: none;
}
.red-modal .red-wrap {
    position: relative;
    min-height: 400px;
    border-radius: 12px;
}
.red-modal .red-notOpen {
    width: 342px;
    height: 480px;
    padding-top: 220px;
    text-align: center;
}
.red-wrap .red-avartar {
    display: inline-block;
    width: 96px;
    height: 96px;
    border: 5px solid #f2261f;
    border-radius: 50%;
    box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.red-wrap .red-avartar img  {
    width: 86px;
    height: 86px;
    border-radius: 50%;
}
.red-notOpen .red-avartar {
    position: absolute;
    top: 78px;
    left: 50%;
    margin-left: -48px;
}
.red-notOpen .red-slogan {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 32px;
    color: #ffff00;
}
.red-notOpen .red-btn {
    margin-top: 50px;
}
.red-notOpen .red-btn a {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    cursor: pointer;
}
.red-notOpen .red-btn .openAnimation .open-btn {
    animation: turn 2s infinite;
}
.red-notOpen .red-btn .open-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    box-shadow: 8px 8px 0 rgba(0,0,0,.1);
}
.red-notOpen .red-btn .front {
    z-index: 5;
    backface-visibility: hidden;
}
@keyframes turn {
    to { transform: rotateY(360deg); }
}
.red-modal .red-opened {
    width: 400px;
    text-align: center;
    color: #333;
}
.red-opened .red-title {
    padding: 20px 0;
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    line-height: 1;
}
.red-opened .red-info {
    padding: 5px 0;
}
.red-opened .red-info p {
    font-size: 22px;
    line-height: 30px;
}
.red-opened .red-info > p {
    position: relative;
    padding: 0 110px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.red-opened .red-info .best-luck {
    position: absolute;
    right: 30px;
    font-size: 14px;
}
.red-opened .red-info .best-luck .icon-luck {
    float: left;
    margin-top: 7px;
    margin-right: 5px;
    width: 18px;
    height: 14px;
}
.red-opened .red-info .money-info {
    padding-top: 10px;
}
.red-opened .red-info .money-info h4 {
    font-size: 40px;
    line-height: 1;
}
.red-opened .red-info .money-info p {
    font-size: 13px;
    color: #4375db;
}
.red-opened .red-info .finished {
    padding: 30px 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
}
.red-opened .red-winner {
    background: #fff;
    height: auto;
    max-height: 260px;
    overflow-y: scroll;
}
#redWinner::-webkit-scrollbar {
	width: 8px;
	background-color: #F6F6F6;
}
#redWinner::-webkit-scrollbar-track {
    background-color: #F6F6F6;
    border-radius: 4px;
}
#redWinner::-webkit-scrollbar-thumb {
	border-radius: 4px;
    background-color: #E6E6E6;
}
#redWinner::-webkit-scrollbar-thumb:hover {
    background-color: #ccc;
}
.red-opened .red-winner dl {
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid #eee;
}
.red-opened .red-winner dl dt,
.red-opened .red-winner dl dt img {
    float: left;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
.red-opened .red-winner dl dd {
    position: relative;
    padding-left: 60px;
    padding-right: 100px;
    text-align: left;
}
.red-opened .red-winner dl dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.red-opened .red-winner dl dd p:nth-of-type(1) {
    font-size: 18px;
    line-height: 24px;
}
.red-opened .red-winner dl dd p:nth-of-type(2) {
    font-size: 16px;
    color: #999;
    line-height: 20px;
}
.red-opened .red-winner dl dd .red-money {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    line-height: 44px;
}
.red-opened .red-record {
    padding: 15px 0;
    line-height: 24px;
    font-size: 16px;
    background: #fff;
    border-radius: 0 0 12px 12px;
}
.red-rule-modal >>> .ivu-modal-footer {
    display: none;
}
.red-rule-modal >>> .ivu-modal-header-inner {
    font-size: 18px;
    font-weight: 400;
}
.red-rule-modal >>> .ivu-modal-body {
    padding: 10px 20px 20px;
}
.red-rule-modal .rule-content {
    font-size: 14px;
}
.red-rule-modal .rule-content ul {
    width: 100%;
    height: auto;
    overflow: hidden;
}
.red-rule-modal .rule-content h5 {
    padding: 20px 0 10px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    border-bottom: 1px solid #eaeaea;
}
.red-rule-modal .rule-content ul li {
    float: left;
    position: relative;
    padding: 5px 0;
    width: 100%;
    height: auto;
    line-height: 24px;
    border-bottom: 1px solid #eaeaea;
}
.red-rule-modal .rule-content ul li .request {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -12px;
    line-height: 25px;
}
.red-rule-modal .rule-content ul li .request .icon-yes {
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    width: 15px;
    height: 15px;
}
.red-rule-modal .rule-content p {
    padding-top: 10px;
    color: #999;
}
</style>



// WEBPACK FOOTER //
// src/components/home/home.vue